<template>
    <div class="page-demo-account-set-base">
        <div class="title">基本设置</div>
        <a-row>
            <a-col :span="16">
                <a-form-model :model="form_data">
                    <a-form-model-item ref="name" label="名称：" prop="name">
                        <a-input placeholder="请填写您的名称" v-model="form_data.name"/>
                    </a-form-model-item>
                    <a-form-model-item ref="sync" label="个人简介：" prop="sync">
                        <a-textarea placeholder="请填写个人简介" v-model="form_data.sync"/>
                    </a-form-model-item>
                    <a-form-model-item ref="name" label="邮箱：" prop="name">
                        <a-input placeholder="请填写邮箱" v-model="form_data.email"/>
                    </a-form-model-item>
                    <a-form-model-item >
                        <a-button type="primary">更新基本信息</a-button>
                    </a-form-model-item>
                </a-form-model>
            </a-col>
            <a-col :span="6" :offset="2">
                <a-avatar class="avatar" :size="164" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" >
                </a-avatar>
            </a-col>
        </a-row>
    </div>
</template>

<script>
export default {
    data(){
        return {
            "form_data" : {
                "name"  : "",
                "sync"  : "",
                "email" : "",
            }
        }
    }
}
</script>

<style lang="less" scoped>
.page-demo-account-set-base{
    padding-left: 50px;
    > .title{
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    /deep/ label{
        font-weight: 400;
    }
    .avatar{
        box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
    }
}
</style>